<template>
    <fieldset v-if="SupportSelectAll || label" style="padding: 8px;">
        <legend style="width: auto;border: none;margin: 0;">
            {{ label }}
            <el-checkbox v-if="SupportSelectAll" @change="doCheckAll" size="large" />
        </legend>
        <el-row v-bind="$attrs">
            <slot />
        </el-row>
    </fieldset>
    <el-row v-else v-bind="$attrs">
        <slot />
    </el-row>
</template>

<script>
export default {
    inheritAttrs: false,
    provide() {
        return {
            CheckAll: this,
        };
    },
    inject: {
        UpCheckAll: { from: "CheckAll", default: null }
    },
    props: {
        label: String,
        SupportSelectAll: Boolean,
    },
    data() {
        return {
            items: []
        }
    },
    mounted() {
        //UpCheckAll构成链，上层全选，自己负责往下传递
        if (this.UpCheckAll) {
            this.UpCheckAll.addItem(this);
        }
    },
    unmounted() {
        if (this.UpCheckAll) {
            this.UpCheckAll.removeItem(this);
        }
    },
    methods: {
        addItem(item) {
            this.items.push(item);
        },
        removeItem(item) {
            let ix = this.items.indexOf(item);
            if (ix != -1) {
                this.items.splice(ix, 1)
            }
        },
        doCheckAll(checked) {
            this.items.forEach(x => {
                if (x["doCheckAll"]) {
                    x.doCheckAll(checked);
                }
            })
        }
    }
}
</script>

<style scoped>
fieldset {
    border: 1px solid #cecece;
}

legend {
    font-size: 1.1em;
    font-weight: 500;
    color: #695fee;
}
</style>